<template>
  <el-row class="warp">
    <el-col :span="24" class="warp-breadcrum" :loading="loading">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
        <el-breadcrumb-item>设置</el-breadcrumb-item>
        <el-breadcrumb-item>网站设置</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>

    <el-col :span="24" class="warp-main">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item prop="title" label="网站标题">
          <el-input v-model="form.title" ></el-input>
        </el-form-item>
        <el-form-item prop="subtitle" label="副标题">
          <el-input v-model="form.subtitle"></el-input>
        </el-form-item>
         <el-form-item prop="desc" label="描述">
          <el-input v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item prop="keyword" label="关键词">
          <el-input v-model="form.keyword" placeholder="多个关键词使用逗号隔开"></el-input>
        </el-form-item>
        <el-form-item prop="baidutj" label="统计代码">
          <el-input type="textarea" resize="none" :rows="5" placeholder="请输入统计代码" v-model="form.baidutj"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSaveProfile">保存设置</el-button>  
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>

import API from '../../api/api_option';
import {bus} from '../../bus.js'

  export default {
    data() {
      return {
        loading: false,
        form: {
          title: '',
          subtitle: '',
          desc: '',
          keyword: '',
          baidutj:''
        },
        rules: {
          title: [
            {required: true, message: '请输入网站标题', trigger: 'blur'}
          ],
          subtitle: [
            {required: true, message: '请输入网站副标题', trigger: 'blur'}
          ],
          desc: [
            {required: true, message: '请输入网站描述', trigger: 'blur'}
          ],
          keyword: [
            { required: true, message: '请输入网站关键词', trigger: 'blur'}
          ]
          // email: [
          //   {required: true, message: '请输入邮箱', trigger: 'blur'},
          //   {type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change'}
          // ]
        }
      }
    },
    methods: {
      handleSaveProfile() {
        let that = this;
        that.$refs.form.validate((valid) => {
          if (valid) {
            that.loading = true;
            let args = {
              title: that.form.title,
              subtitle: that.form.subtitle,
              desc: that.form.desc,
              keyword: that.form.keyword,
              baidutj: that.form.baidutj
            };
            API.save(args).then(function (result) {
              that.loading = false;
              if (result && parseInt(result.errcode) === 0) {
                //修改成功
                that.$message.success({showClose: true, message: result.errmsg, duration: 2000});
              } else {
                that.$message.error({showClose: true, message: result.errmsg, duration: 2000});
              }
            }, function (err) {
              that.loading = false;
              that.$message.error({showClose: true, message: err.toString(), duration: 2000});
            }).catch(function (error) {
              that.loading = false;
              that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
            });
          }
        });
      },
      getoptionInfo(){
        let that = this;
        API.get("siteConfig").then(function (result) {
            if(result.errcode == undefined){
              that.form.title = result.title,
              that.form.subtitle =  result.subtitle,
              that.form.desc = result.desc,
              that.form.keyword = result.keyword,
              that.form.baidutj = result.baidutj
            }
        })
      }
    },
    mounted() {
      this.getoptionInfo();
      // let user = localStorage.getItem('access-user');
      // if (user) {
      //   user = JSON.parse(user);
      //   this.form.useranme = user.username;
      //   this.form.nickname = user.nickname || '';
      //   this.form.email = user.email || '';
      //   this.form.name = user.name || '';
      // }
    }
  }
</script>
